<template>
  <el-dropdown @command="handleCommand">
    <el-button type="warning" plain icon="Download">
      导出<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="xls">XLS</el-dropdown-item>
        <el-dropdown-item command="csv">CSV</el-dropdown-item>
        <el-dropdown-item v-if="props.exportToPdf" command="pdf"
          >PDF</el-dropdown-item
        >
        <el-dropdown-item command="xlsx">XLSX</el-dropdown-item>
        <el-dropdown-item v-if="props.exportToWord" command="word"
          >Word</el-dropdown-item
        >
        <el-dropdown-item command="json">JSON</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup name="YExport">
const { proxy } = getCurrentInstance();

const props = defineProps({
  url: { type: String, default: "" },
  ids: { type: Object, default: {} },
  filename: { type: String, default: "data" },
  config: { type: Object, default: {} },
  exportToPdf: { type: Function, default: null },
  exportToWord: { type: Function, default: null },
});

function handleCommand(format) {
  if (props.ids.length > 0) {
    switch (format) {
      case "pdf":
        props.exportToPdf();
        break;
      case "word":
        props.exportToWord();
        break;
      default:
        let filename = `${props.filename}_${new Date().getTime()}.${format}`;
        let params = { ids: props.ids, format: format };
        let config = props.config;
        proxy.download(props.url, filename, params, config);
        break;
    }
  } else {
    proxy.$modal.msg("请勾选需要导出的数据项！");
  }
}
</script>
